
import { PROTOCAL_SEGMENT_BEGIN, PROTOCAL_SEGMENT_END, PROTOCAL_SEGMENT_SEPARATOR, buildElementId, getElementById } from './base'

export const PROTOCAL_SEGMENT_OPTION = '1'

const handleAttribute = function (data, id, index, group, option, readonly) {
  let attributes =' <input class="template-col" type="' + data.type + '"'
  let elementId = ''
  if (id) {
    elementId = buildElementId(id) + '-' + index
    attributes += ' id="' + elementId + '"'
  }
  if (readonly) {
    attributes += ' disabled'
  }
  if (data.value) {
    if (data.type === 'radio' && data.value === option) {
      attributes += ' checked="true"'
    } else if (data.type === 'checkbox' && data.value instanceof Array) {
      data.value.forEach(e => {
        if (e === option) {
          attributes += ' checked="true"'
        }
      })
    }
  }
  attributes += ' name="' + group + '" class="record-template-input-check" value="' + option + '"  " />' + ' <span onclick="handleOptionClick(\'' + elementId + '\')">' + option + '</span> '
  return attributes
}

export function toHtml(params, id, readonly) {
  const data = params || {}
  let html = ''
  const group = Math.random()
  let index = 0
  data.options.forEach(e => {
    html += handleAttribute(data, id, index, group, e, readonly)
    index++
  })
  return html
}

export function toTemplate(params) {
  const data = params || {}
  return PROTOCAL_SEGMENT_BEGIN + PROTOCAL_SEGMENT_OPTION + PROTOCAL_SEGMENT_SEPARATOR + JSON.stringify(data) + PROTOCAL_SEGMENT_END
}

const getRadioValue = function(element, id, index) {
  if (element) {
    if (element.checked === true) {
      return element.value
    }
    index++
    return getRadioValue(getElementById(id + '-' + index), id, index)
  }
  return null
}

const getCheckboxValue = function(element, id, index, array) {
  if (element) {
    if (element.checked === true) {
      array.push(element.value)
    }
    index++
    getCheckboxValue(getElementById(id + '-' + index), id, index, array)
  }
}

export function getOptionData(id) {
  const element = getElementById(id + '-0')
  if (element) {
    if (element.type === 'radio') {
      return getRadioValue(element, id, 0)
    } else if (element.type === 'checkbox') {
      const array = []
      getCheckboxValue(element, id, 0, array)
      return array
    }
  }
  return null
}

export function parseOptionToHtml(segment, segmentValue, id, readonly) {
  if (!segment) {
    return null
  }
  const data = parseOptionToData(segment, segmentValue)
  if (data) {
    return toHtml(data, id, readonly)
  }
  return null
}

export function parseOptionToData(segment, segmentValue) {
  // console.log(segment, segmentValue);
  if (!segment) {
    return null
  }
  if (segment.startsWith(PROTOCAL_SEGMENT_OPTION)) {
    const segmentString = segment.substring(PROTOCAL_SEGMENT_OPTION.length + PROTOCAL_SEGMENT_SEPARATOR.length)
    const data = JSON.parse(segmentString)
    if (segmentValue) {
      data.value = segmentValue
    }
    return data
  }
  return null
}
